<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="服务商">
              <a-select
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                        v-decorator="[ 'businessServiceId', {rules: [{ required: true, message: '请选择。。。' }]} ]"
                       >
                <a-select-option  v-model="queryParam.businessServiceId" v-for="item in businessList" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button v-action:query style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="{ show: true, clear: true }"
      :scroll="{x:1500}"
      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
    >
      <span slot="payType" slot-scope="text">
        {{ text | statusFilter }}
      </span>
      <span slot="orderTotalFee" slot-scope="text">
        {{ text /100 }}元
      </span>

    </s-table>

  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import { selectAll} from '@/api/businessService/business'
  import {  selectList } from '@/api/businessService/order'

  export default {
    components: {
      STable
    },
    //--############  data() ###############&ndash;&gt;
    data() {
      return {
        description: '',
        // 高级搜索 展开/关闭
        advanced: false,
        businessList:[],
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '编号',
            dataIndex: 'code'
          },
          {
            title: '服务商名称',
            dataIndex: 'serviceBusinessName'
          },
          {
            title: '订单金额',
            dataIndex: 'orderTotalFee',
            scopedSlots: { customRender: 'orderTotalFee' }
          },
          // {
          //   title: '实际支付金额',
          //   dataIndex: 'realPayFee'
          // },
          {
            title: '交易订单号',
            dataIndex: 'transactionId'
          },
          {
            title: '商户订单号',
            dataIndex: 'outTradeNo'
          },

          {
            title: '实际支付方式',
            dataIndex: 'payType',
            scopedSlots: { customRender: 'payType' }
          },
          {
            title: '创建时间',
            dataIndex: 'createdTime'
          }


        ],
        businessList:[],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log( this.businessServiceId)
          this.businessServiceId = this.businessServiceId

          return selectList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        },

        selectedRowKeys: [],
        selectedRows: []
      }
    },
    mounted() {
      selectAll().then(res => {
        this.businessList = res.result
      })
    },
    methods: {
      handleOk() {
        // 新增/修改 成功时，重载列表
        this.$refs.table.refresh(true)
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced() {
        this.advanced = !this.advanced
      },

    },
    //--############  methods() ###############&ndash;&gt;
    //--############  filters() ###############&ndash;&gt;
    filters: {
      statusFilter(payType) {
        const statusMap = {
          1: '微信扫码',
          2: '支付宝扫码',

        }
        return statusMap[payType]
      }
    }
    //--############  filters() ###############-->
  }
</script>
